<template>
	<div class="Header">	
		<GoTop></GoTop>
		<!--搜索框-->
		<div class="search">
			<a href="javascript:void(0)" class="logo"></a>
			<a href="#/search" class="content">
					<input type="text" placeholder="拉菲红酒专场会"/>
			</a>
			<a href="" class="shopping icon-icon---copy iconfont"></a>
			<a href="#/Login" class="reg">登录</a>
		</div>
		<!--轮播图-->
		<Swiper></Swiper>
		<ul class="classify">
			<li v-for="k in arrList">{{k}}</li>
		</ul>
		<div class="order">
			<span class="line"></span>
			<span class="txt">产品清单</span>
			<span class="line"></span>
		</div>
		<div class="showImg">
			<a href="#/list" v-for="k in arrImg">
				<img  :src="'static/img-Header/'+k"  />
			</a>
		</div>
		<div class="order">
			<span class="line"></span>
			<span class="txt">为您推荐</span>
			<span class="line"></span>
		</div>
		<div class="shopping">
			<span v-for="k in arrShopping">
				<a href="#/detail">
					<img :src="'static/img-Header/'+k.img" alt="" />
					<p>澳洲原瓶进口红酒洛神...</p>
					<em>{{k.price}}</em>
				</a>
			</span>
		</div>
		<div class="space"></div>
	<!--底部公共样式-->
	<bottom></bottom>
	
	</div>
</template>

<script>
	import Swiper from './Swiper'
	import Bottom from './Bottom'
	import GoTop from './goTop'
	export default {
		name: 'xxx',
		data(){
			return{
				arrList:['每日推荐','限时闪购','新品上架','热销推荐'],
				arrImg:['1_00.png','1_01.png','1_02.png','1_03.png','1_04.png'],
				arrShopping:[{img:'j-01.jpg',price:'¥498.00'},	{img:'j-02.jpg',price:"¥888.00"},{img:'j-03.jpg',price:'¥118.00'},{img:'j-04.jpg',price:'¥666.00'}]
			}
		},
		components: {
			Swiper,
			Bottom,
			GoTop
		},
		mounted(){
			
		}
	}
	
</script>

<style scoped>
	.search{
		width: 98%;
		height: 4rem;
		line-height: 4rem;	
	}
	.search a{
		margin-left: 2%;		
	}
  .logo{
		display: inline-block;
		width: 3rem;
		height: 3rem;
		margin-top: 0.5rem;
		background:url(../../../static/img-Header/logo.png) no-repeat ;
		background-size:100% 100% ;
	}
	.content{
		display: inline-block;
		width: 60%;
		height: 3rem;
		border-radius: 1.5rem;
		background: rgb(244,244,244);
		vertical-align: 20%;		
	}
	.content::before{
		display: inline-block;
		content: "";
		width: 1.5rem;
		height: 1.5rem;
		margin:0 1rem;
		background: url(../../../static/img-Header/搜索.png);
		background-size:100% 100% ;
	}
	.content  input{
		outline: none;
		border: none;
		vertical-align: 31%;
		background: rgb(244,244,244);
	}
	.shopping{
		font-size: 2rem;
		vertical-align: 25%;
		color: gray;
	}
	.reg{
		font-size: 1.3rem;
		vertical-align: 25%;
		color: gray;
	}

	.classify {
		width: 100%;
		height: 5rem;
		margin: 1rem 0;
		display: flex;
		justify-content: space-around;
	}
	
	.classify li {
		width: 5rem;
		height: 100%;
		line-height: 5rem;
		border-radius: 50%;
		background: pink;
		text-align: center;
	}
	
	.order {
		width: 90%;
		height: 2rem;
		line-height:2rem;
		margin: 1rem auto;
	}
	
	.order .line {
		display: inline-block;
		width: 40%;
		border-top: 2px solid #ccc;
	}	
	.order .txt {
		color: #686868;
		vertical-align: -8%;
	}
	.showImg{
		width: 90%;
		margin: 0 auto;
	}	
	.showImg img{
		width:100% ;
	}
	.shopping{
		width: 90%;
		margin: 0 auto;
	}
	.shopping span{
		display: inline-block;
		width: 48%;
		height: 17rem;
		margin: 1% 0 2% 0;
	}
	.shopping img{
		width: 100%;
	}
	.shopping a{
		color:black;
	}
	.shopping em{
		color: red;
		font-size: 1.3rem;
	}
	.shopping span:nth-of-type(2),.shopping span:nth-of-type(3){
		float: right;
	}
	.space{
		height: 5rem;	
	}
</style>